<!-- 周期 -->

<template>
  <FormSlot :label="`${GETTER.type}周期`" bind="cycleDesc" required>
    <div>
      <div v-if="one.cycleDesc">
        <span class="el-button--text" @click="toOpen">循环时间：{{ one.cycleDesc }}</span>
        <BtnText v-if="isShow" title="立即生成任务" class="Plan-MyPeriod-deal" @click="toImmediate" />
        <BtnText v-else title="清除" @click="toClear" />

        <div>执行时间：{{ one.exePeriodDesc }}</div>
      </div>

      <BtnPrimary v-else-if="!isShow" title="选择" @click="toOpen" />
    </div>

    <EasyModal v-model="easyVisible" :title="`设置${GETTER.type}周期`" medium @submit="toSubmit">
      <FormSlot v-if="easyVisible" label="循环时间" bind="planAssetIds" required>
        <FormNum
          bind="cycleValue"
          :min="1"
          :max="999"
          tip="数量"
          initMin
          rightBtn
          noLabel
          noClear
          sixth
          required
          @change="changeType"
        />
        <FormSelect
          bind="cycleType"
          :dict="DICT.PERIOD_UNIT"
          tip="单位"
          :labelWidth="10"
          eighth
          noClear
          @change="changeType"
        />
        <FormNum
          bind="cycleTimes"
          :min="1"
          :max="99"
          tip="次数"
          initMin
          rightBtn
          :labelWidth="10"
          sixth
          required
          @change="changeTimes"
        />
        <FormSlot :labelWidth="20" sixth>次</FormSlot>
      </FormSlot>

      <FormSlot label="执行时间" />

      <WebTable :list="one.planCycleDto" noPage class="Plan-MyPeriod-table">
        <RowIndex label="次" :width="50" />
        <RowSlot label="开始时间">
          <template #default="{ row }">
            <span>第</span>
            <span v-if="one.cycleType === '年'">
              <FormNum
                :one="row"
                bind="cycleStartYear"
                :min="1"
                :max="one.cycleValue"
                initMin
                noBtn
                @change="setDesc"
              />
              <div class="el-input__inner">年</div>
            </span>
            <span v-if="one.cycleType !== '日'">
              <FormNum
                :one="row"
                bind="cycleStartMonth"
                :min="1"
                :max="one.cycleType === '年' ? 12 : one.cycleValue"
                initMin
                noBtn
                @change="setDesc"
              />
              <div class="el-input__inner">月</div>
            </span>
            <FormNum
              :one="row"
              bind="cycleStartDate"
              :min="1"
              :max="one.cycleType === '日' ? one.cycleValue : 31"
              initMin
              noBtn
              @change="setDesc"
            />
            <div class="el-input__inner">日</div>
            <el-time-picker
              v-model="row.cycleStartTime"
              value-format="HH:mm"
              format="HH:mm"
              @change="changeStart(row)"
            />
          </template>
        </RowSlot>
        <RowSlot label="结束时间">
          <template #default="{ row }">
            <span>第</span>
            <span v-if="one.cycleType === '年'">
              <FormNum :one="row" bind="cycleEndYear" :min="1" :max="one.cycleValue" initMin noBtn @change="setDesc" />
              <div class="el-input__inner">年</div>
            </span>
            <span v-if="one.cycleType !== '日'">
              <FormNum
                :one="row"
                bind="cycleEndMonth"
                :min="1"
                :max="one.cycleType === '年' ? 12 : one.cycleValue"
                initMin
                noBtn
                @change="setDesc"
              />
              <div class="el-input__inner">月</div>
            </span>
            <FormNum
              :one="row"
              bind="cycleEndDate"
              :min="1"
              :max="one.cycleType === '日' ? one.cycleValue : 31"
              initMin
              noBtn
              @change="setDesc"
            />
            <div class="el-input__inner">日</div>
            <el-time-picker v-model="row.cycleEndTime" value-format="HH:mm" format="HH:mm" @change="changeEnd(row)" />
          </template>
        </RowSlot>
      </WebTable>
    </EasyModal>
  </FormSlot>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'MyPeriod',

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [CORE.mixWeb(), CORE.mixWeb('immediate', 'immediate_')],

  /**
   * 组件导入 (Abc.vue + Abc/index.vue)
   */
  ...CORE.components(require.context('./', true, /vue$/)),

  /**
   * 状态数据 (函数返回对象)
   */
  data() {
    return {
      easyVisible: false, // 弹窗是否可见
    }
  },

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    /**
     * 弹窗
     */
    toOpen() {
      this.easyVisible = true
    },

    /**
     * 提交
     */
    toSubmit() {
      this.easyVisible = false
    },

    /**
     * 清除
     */
    toClear() {
      Object.assign(this.one, {
        cycleDesc: '',
        cycleValue: 0,
        cycleType: '日',
        cycleTimes: 0,
        planCycleDto: [],
      })
    },

    /**
     * 立即生成任务
     */
    toImmediate() {
      const { id } = this.one
      this.immediate_openAdd({ id })
    },

    /**
     * 切换类型
     */
    changeType() {
      const { one, MAP } = this
      const { cycleValue: num, cycleType: type, cycleTimes: times } = one
      one.cycleDesc = `${num}${type}${times}次`

      if (!times) one.planCycleDto = []
      else {
        const periodList = Array(times).fill().map((_, i) => ({ ...CORE.clone(MAP.INIT_PERIOD), id: i, index: i + 1 }))
        one.planCycleDto = periodList
      }
    },

    /**
     * 切换次数
     */
    changeTimes() {
      const { one, MAP } = this
      const { cycleValue: num, cycleType: type, cycleTimes: times, planCycleDto: oldList } = one
      one.cycleDesc = `${num}${type}${times}次`

      if (!times) one.planCycleDto = []
      else if (times <= oldList.length) one.planCycleDto = oldList.slice(0, times)
      else {
        const newList = Array(times).fill().map((_, i) => ({
          ...CORE.clone(MAP.INIT_PERIOD),
          id: `${one.cycleType}-${i}`,
          index: i + 1,
        }))
        one.planCycleDto = [...oldList, ...newList.slice(oldList.length)]
      }
    },

    /**
     * 切换开始时间
     */
    changeStart(row) {
      const [hour, minute] = (row.cycleStartTime || '').split(':')
      row.cycleStartHour = +hour
      row.cycleStartMinute = +minute
      this.setDesc()
    },

    /**
     * 切换结束时间
     */
    changeEnd(row) {
      const [hour, minute] = (row.cycleEndTime || '').split(':')
      row.cycleEndHour = +hour
      row.cycleEndMinute = +minute
      this.setDesc()
    },

    /**
     * 设置描述
     */
    setDesc() {
      const { cycleType: type, planCycleDto } = this.one
      const descList = planCycleDto.map(item => {
        const year1 = type === '年' ? `${item.cycleStartYear}年` : ''
        const month1 = type !== '日' ? `${item.cycleStartMonth}月` : ''
        const day1 = `${item.cycleStartDate}日`
        const hour1 = `0${item.cycleStartHour}:`.slice(-3)
        const minute1 = `0${item.cycleStartMinute}`.slice(-2)
        const year2 = type === '年' ? `${item.cycleEndYear}年` : ''
        const month2 = type !== '日' ? `${item.cycleEndMonth}月` : ''
        const day2 = `${item.cycleEndDate}日`
        const hour2 = `0${item.cycleEndHour}:`.slice(-3)
        const minute2 = `0${item.cycleEndMinute}`.slice(-2)
        return `第${year1}${month1}${day1}${hour1}${minute1} - 第${year2}${month2}${day2}${hour2}${minute2}`
      })
      this.one.exePeriodDesc = descList.join(' ； ')
    },
  },
}
</script>

<style lang="scss">
@import './index.scss';
</style>
